
//默认描述
const defaultText = '这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。';
//默认图片1
const defaultImg1 = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF';
//默认图片2
const defaultImg2 = 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF';
//默认视频
const defaultVideo = 'http://www.fortunetea.com.cn/template/1/fcv2/files/1.mp4';

export const decorators = [
	{
		title: '布局组件',
		type: 0,
		children: [
			{
				title: '格栅布局',
				icon: 'fa fa-th',
				type: 'Custom',
				data: {
					layoutType: 'L1',
					density: 3,
					layoutHeight: 100,
					averageBoxData: [], // 记录格子的激活状态
					activeIndex: 0, // 记录框的位置
					elementNum: 1, // 生成格子数量
					children: [{
						bgColor: '',
						imageUrl: '',
						componentsData: [],
					}],
				}
			},
		]
	},
	{
		title: '基础组件',
		type: 1,
		children: [
			{
				title: '轮播图',
				icon: 'fa fa-forward',
				type: 'Banner',
				data: {
					scale: 16/9, //宽度高度比例
					height: 200,//carousel 的高度	string	—	—
					initialIndex: 0,//初始状态激活的幻灯片的索引，从 0 开始	number	—	0
					trigger: 'hover',//指示器的触发方式	string	hover/click	hover
					autoplay: true,//是否自动切换	boolean	—	true
					interval: 3000,//自动切换的时间间隔，单位为毫秒	number	—	3000
					indicatorPosition: '',//指示器的位置	string	outside/none	—
					arrow: 'never',//切换箭头的显示时机	string	always/hover/never	hover
					type: '',//carousel 的类型	string	card	—
					loop: true,//是否循环显示	boolean	-	true
					direction: 'horizontal',//展示的方向	string	horizontal/vertical	horizontal
					pauseOnHover: true,//鼠标悬浮时暂停自动切换	boolean	-	true
					carousels: [{
						title: '图片标题',
						url: defaultImg1
					},{
						title: '图片标题',
						url: defaultImg2
					}]
				}
			},
			{
				title: '标题文本',
				icon: 'fa fa-font',
				type: 'Text',
				data: {
					title: 'WEB设计', // 标题内容
					height: 30, //文本高度
					lineHeight: 1.5, // 行高
					textAlign: 'left', // 文本对齐方向
					fontSize: 18, // 文本字体大小
					fontWeight: 'bold', // 文本粗细
					fontColor: '#333333', // 文本颜色
					bgColor: '', // 文本背景
				}
			},
			{
				title: '图片组件',
				icon: 'fa fa-picture-o',
				type: 'Image',
				data: {
					fit: 'cover',
					height: 150,
					imageUrl: defaultImg2,
					linkObj: {},
				}
			},
			{
				title: '图文文本',
				icon: 'fa fa-file-word-o',
				type: 'ImageText',
				data: {
					height: 200,
					imageUrl: defaultImg1,
					linkObj: {},
					positionValue: 'left',
					content: `<p><span style="color: #666666;">${defaultText}</span></p>`
				}
			},
			{
				title: '图文列表',
				icon: 'fa fa-th-large',
				type: 'ImageTextList',
				data: {
					title: '图文列表',
					textAlign: 'left', // 文本对齐方向
					fontSize: 18, // 文本字体大小
					fontWeight: 'bold', // 文本粗细
					fontColor: '#333333', // 文本颜色
					listStyle: '1-2',
					imgTextData: [{
						linkObj: {},
						isShow: true,
						title: '图1',
						titleOptions: {
							textAlign: 'center', // 文本对齐方向
							fontSize: 14, // 文本字体大小
							fontWeight: 'bold', // 文本粗细
							fontColor: '#666666', // 文本颜色
						},
						describe: '图文描述',
						describeOptions: {
							textAlign: 'center', // 文本对齐方向
							fontSize: 14, // 文本字体大小
							fontWeight: 'normal', // 文本粗细
							fontColor: '#666666', // 文本颜色
						},
						imgUrl: defaultImg1
					}, {
						linkObj: {},
						isShow: true,
						title: '图2',
						titleOptions: {
							textAlign: 'center', // 文本对齐方向
							fontSize: 14, // 文本字体大小
							fontWeight: 'bold', // 文本粗细
							fontColor: '#666666', // 文本颜色
						},
						describe: '图文描述',
						describeOptions: {
							textAlign: 'center', // 文本对齐方向
							fontSize: 14, // 文本字体大小
							fontWeight: 'normal', // 文本粗细
							fontColor: '#666666', // 文本颜色
						},
						imgUrl: defaultImg2
					}]
				}
			},
			{
				title: '铺助分割',
				icon: 'fa fa-eject',
				type: 'Division',
				data: {
					height: 20,
					bgColor: ''
				}
			},
			{
				title: '视频',
				icon: 'fa fa-video-camera',
				type: 'Video',
				data: {
					url: defaultVideo,
					content: '<p><span style="color: #666666;">视频描述</span></p>',
					positionValue: 'bottom',
					autoplay: false,
					loop: false,
					poster: '',
				}
			},
		]
	},
	{
		title: '表单组件',
		type: 2,
		children: [
			{
				title: '输入框',
				icon: 'fa fa-pencil-square-o',
				type: 'Pencil',
				data: {
					type: 'text',//类型	string	text，textarea 和其他 原生 input 的 type 值text
					modelValue: '', // v-model	绑定值	string / number	—	—
					maxlength: 100, //最大输入长度	string / number	—	—
					minlength: 0, //原生属性，最小输入长度	number	—	—
					showWordLimit: false,//是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效	boolean	—	false
					placeholder: '请输入', //输入框占位文本	string	—	—
					clearable: true, //是否可清空	boolean	—	false
					//formatter: '', //指定输入值的格式。(只有当 type 是"text"时才能工作)	function(value: string / number): string	—	—
					//parser: '', //指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)	function(string): string	—	—
					showPassword: false, //是否显示切换密码图标	boolean	—	false
					disabled: false, //是否禁用	boolean	—	false
					size: 'small', //输入框尺寸，只在 type 不为 'textarea' 时有效	string	large / default / small	—
					//prefixIcon: '', //自定义前缀图标	string / Component	—	—
					//suffixIcon: '', //自定义后缀图标	string / Component	—	—
					rows: 2, //输入框行数，仅 type 为 'textarea' 时有效	number	—	2
					autosize: false, //textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }	boolean / object	—	false
					//autocomplete: 'off', //原生 autocomplete 属性	string	—	off
					name: 'input', //等价于原生 input name 属性	string	—	—
					readonly: false, //原生  readonly 属性，是否只读	boolean	—	false
					//max: '', //原生 max 属性，设置最大值	—	—	—
					//min: '', //原生属性，设置最小值	—	—	—
					//step: '', //原生属性，设置输入字段的合法数字间隔	—	—	—
					//resize: '', //控制是否能被用户缩放	string	none / both / horizontal / vertical	—
					//autofocus: false, //原生属性，自动获取焦点	boolean	—	false
					//form: '', //原生属性	string	—	—
					//tabindex: '', //输入框的 tabindex	string / number	-	-
					//validateEvent: true, //输入时是否触发表单的校验	boolean	-	true
					//inputStyle: {}, //input 元素或 textarea 元素的 style	object	-	{}
					labelValue: '标签名称', //标签文本	string	—	—
					labelWidth: 6, ////标签文本宽度， 最大24	number	—	6
					required: false, //是否必填
				}
			},
			{
				title: '计数器',
				icon: 'fa fa-sort-numeric-desc',
				type: 'Counter',
				data: {
					modelValue: 0, // v-model	选中项绑定值	number / undefined	—	—
					min: 0, //设置计数器允许的最小值	number	—	-Infinity
					max: 100, //设置计数器允许的最大值	number	—	Infinity
					step: 1, //计数器步长	number	—	1
					stepStrictly: false, //是否只能输入 step 的倍数	boolean	—	false
					precision: 0, //数值精度	number	—	—
					size: 'small', //计数器尺寸	string	large/small	default
					disabled: false, //是否禁用计数器	boolean	—	false
					controls: true,//是否使用控制按钮	boolean	—	true
					controlsPosition: '', //控制按钮位置	string	right	-
					name: 'counter', //原生 name 属性	string	—	—
					//placeholder: '', //输入框默认 placeholder	string	-	-
					//validate-event: true, //输入时是否触发表单的校验	boolean	-	true
					labelValue: '标签名称', //标签文本	string	—	—
					labelWidth: 6, ////标签文本宽度， 最大24	number	—	6
					required: false, //是否必填
				}
			},{
				title: '多选框',
				icon: 'fa fa-check-square-o',
				type: 'Checkbox',
				data: {
					modelValue: [], // v-model	绑定值	array	—	[]
					size: 'small', //多选框组尺寸	string	large / default / small	—
					disabled: false, //是否禁用	boolean	—	false
					min: 0, //可被勾选的 checkbox 的最小数量	number	—	—
					max: 100, //可被勾选的 checkbox 的最大数量	number	—	—
					textColor: '#ffffff', //当按钮为活跃状态时的字体颜色	string	—	#ffffff
					fill: '#409EFF', //当按钮为活跃状态时的边框和背景颜色	string	—	#409EFF
					name: 'checkbox', //原生 name 属性	string	—	—
					//validate-event	输入时是否触发表单的校验	boolean	-	true
					options: [
						{
							value: '0',
							name: '选项一',
							checked: false,
							disabled: false,
						},
						{
							value: '1',
							name: '选项二',
							checked: true,
							disabled: false,
						},
						{
							value: '2',
							name: '选项三',
							checked: true,
							disabled: true,
						},
					],
					labelValue: '标签名称', //标签文本	string	—	—
					labelWidth: 6, ////标签文本宽度， 最大24	number	—	6
					required: false, //是否必填
				}
			},
			{
				title: '单选框',
				icon: 'fa fa-check-square-o',
				type: 'Radiobox',
				data: {
					modelValue: '', // v-model	绑定值	string	—	
					size: 'small', //多选框组尺寸	string	large / default / small	—
					disabled: false, //是否禁用	boolean	—	false
					name: 'radiobox', //原生 name 属性	string	—	—
					//validate-event	输入时是否触发表单的校验	boolean	-	true
					options: [
						{
							value: '0',
							name: '选项一',
							disabled: false,
						},
						{
							value: '1',
							name: '选项二',
							disabled: false,
						},
						{
							value: '2',
							name: '选项三',
							disabled: true,
						},
					],
					labelValue: '标签名称', //标签文本	string	—	—
					labelWidth: 6, ////标签文本宽度， 最大24	number	—	6
					required: false, //是否必填
				}
			},
			{
				title: '选择器',
				icon: 'fa fa-list-ol',
				type: 'Selectbox',
				data: {
					modelValue: '', //v-model	选中项绑定值	string / number / boolean / object	—	—
					multiple: false, //是否多选	boolean	—	false
					disabled: false, //是否禁用	boolean	—	false
					valueKey: 'value', //作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
					size: 'small', //输入框尺寸	string	large/default/small	default
					clearable: false, //是否可以清空选项	boolean	—	false
					collapseTag: false, //多选时是否将选中值按文字的形式展示	boolean	—	false
					collapseTagsTooltip: false, //当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
					multipleLimit: 0, //multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制	number	—	0
					name: 'selecter', //Select 输入框的原生 name 属性	string	—	—
					effect: 'light', //Tooltip 主题，内置了 dark / light 两种	string	string	light
					//autocomplete: 'off', //Select 输入框的原生 autocomplete 属性	string	—	off
					placeholder: '请选择', //占位文字	string	—	Select
					filterable: false, //Select 组件是否可筛选	boolean	—	false
					allowCreate: false, //是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。	boolean	—	false
					//filter-method: '', //自定义筛选方法	function	—	—
					//remote: false, //其中的选项是否从服务器远程加载	boolean	—	false
					//remoteMethod: '', //自定义远程搜索方法	function	—	—
					//loadingSelect: false, //组件是否从远程加载数据	boolean	—	false
					//loadingTex: '', //从服务器加载内容时显示的文本	string	—	Loading
					noMatchText: '未匹配到数据', //搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置	string	—	No matching data
					noDataText: '暂无数据', //无选项时显示的文字，也可以使用 empty 插槽设置自定义内容	string	—	No data
					//popperClass: '', //Select 下拉框的自定义类名	string	—	—
					reserveKeyword: true, //当 multiple 和 filter被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	true
					//default-first-option: '', //是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用	boolean	-	false
					//teleported: true, //是否将下拉列表插入至 body 元素	boolean	true / false	true
					//persistent: true, //当下拉选择器未被激活并且persistent设置为false，选择器会被删除。	boolean	true / false	true
					//automaticDropdown: false, //对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false
					//clear-icon: '', //自定义清除图标组件	string / Component	—	CircleClose
					//fit-input-width '', //下拉框的宽度是否与输入框相同	boolean	—	false
					//suffix-icon '', //自定义后缀图标组件	string / Component	—	ArrowUp
					tagType: 'info', //标签类型	string	success/info/warning/danger	info
					//validateEvent: '', //输入时是否触发表单的校验	boolean	-	true
					options: [
						{
							label: '分组一',
							options: [
								{
									value: '0',
									name: '选项一',
									disabled: false,
								},
								{
									value: '1',
									name: '选项二',
									disabled: false,
								},
								{
									value: '2',
									name: '选项三',
									disabled: true,
								},
							]
						},
					],
					labelValue: '标签名称', //标签文本	string	—	—
					labelWidth: 6, ////标签文本宽度， 最大24	number	—	6
					required: false, //是否必填
				}
			},
			{
				title: '按钮组件',
				icon: 'fa fa-minus',
				type: 'Button',
				data: {
					title: '按钮',
					size: 'small',//尺寸	string	large / default /small	—
					type: 'primary',//类型	string	primary / success / warning / danger / info / text	—
					color: '', //颜色 string #626aef
					align: 'center', // 对齐方向 left / center / right left
					plain: false,//是否为朴素按钮	boolean	—	false
					round: false,//是否为圆角按钮	boolean	—	false
					circle: false,//是否为圆形按钮	boolean	—	false
					disabled: false,//按钮是否为禁用状态	boolean	—	false
					icon: '',//图标组件	string / Component	—	—
					nativeType: 'button', //原生 type 属性	string	button / submit / reset	button
					eventType: '', //按钮事件类型
					width: 0,// 宽度
					widthUnit: '%', //宽度单位，px，%，em，rem，pt
				}
			}
		]
	}
]
